<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form ref="form" :model="form">
            <el-form-item label="车辆号牌：">
              <el-input
                v-model="form.name"
                placeholder="请输入车牌"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="9">
          <el-form ref="form" :model="form">
            <el-form-item label="日期：" :label-width="labelwidth">
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form ref="form" :model="form" style="float: left">
            <el-form-item>
              <el-button size="mini" type="primary" @click="screeningData"
                >查 询</el-button
              >
              <!-- <el-button size="mini" type="success" @click="handleAdd">新 增</el-button>
              <el-button style="padding:0;border:0">
              <el-upload
                  action="/上传文件的接口"
                  :on-change="onChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept=".xls, .xlsx"
                  class="upload"
              >
                <el-button size="mini" type="success" >导 入</el-button>
              </el-upload>
              </el-button>
              <el-button size="mini" type="warning" @click="exportExcel">导 出</el-button> -->
              <!-- <el-button size="mini" type="success" @click="exportExcel">删 除</el-button> -->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
      :data="
        expireData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="CPH"
        label="车牌照号"
        align="center"
        width="500"
      ></el-table-column>
      <el-table-column
        prop="TYPE"
        label="到期项目类型"
        align="center"
        width="500"
      ></el-table-column>
      <el-table-column
        prop="YINSPECTTIME"
        label="到期时间"
        align="center"
        width="500"
      ></el-table-column>
      <!-- <el-table-column label="操作" width="180" align="center" >
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="expireData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 到期提醒 -->
    <el-dialog title="到期提醒" :visible.sync="showBigDialogDate">
      <div>
        <el-tabs type="border-card" style="min-height: 350px">
          <!-- <el-tab-pane label="全部" > -->
          <el-table :data="expireData" style="width: 100%"  border>
            <el-table-column
              prop="CPH"
              label="车牌号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="TYPE"
              label="类型"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="YINSPECTTIME"
              label="到期时间"
              align="center"
            ></el-table-column>
          </el-table>
          <!-- </el-tab-pane> -->
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'

import export2Excel from '@/utils/exportExcel/index.js'
import OSS from 'ali-oss';
import { time } from 'echarts';
export default {
  data () {

    return {
      clientData: [],
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      expireData: [],
      select: {
        CPH: ''
      },
      showBigDialogDate: true,
      isVisibleEdit: false,
      form: {
        WaterCPH: "",
        WaterTime: "",
        CreateTime: "",
        WaterNumber: "",
        WaterLocation: "",
        WaterCphType: "",
        WaterPeople: "",
        WaterPeopleID: "",
      },
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        },]
      },
      value2: ''
    }
  },
  created () {

    this.getClientRoleList()
  },
  mounted () {
    this.getexpiredata()
    this.getlistdata()
    this.screeningData()
  },
  methods: {
    //获取到期提醒列表
    async getexpiredata () {
      this.currentPage = 1;
      var url = '/CarService/GetCarExpiretInfo?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.expireData = data
    },
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>